<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<u-navbar bgColor="#0e3a5e" title="角色选择" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true"
			leftIconColor="#fff" :titleStyle="titleStyle">
		</u-navbar>
		<!-- #endif -->
		<u-sticky>
			<!-- #ifdef APP-PLUS -->
			<u-navbar bgColor="#0e3a5e" title="角色选择" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true"
				leftIconColor="#fff" :titleStyle="titleStyle">
			</u-navbar>
			<!-- #endif -->
			
		</u-sticky>
		<template v-if="MobileAdminList.length">
			<view class="title pdBox">管理端账号</view>
			<view class="list" >
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in MobileAdminList" :key="listIndex"
						@click="handelClickRole(listItem)">
						<view class="grid-text" :class="{'active':activeRole && listItem.roleName==activeRole.roleName}">
							<text>{{listItem.roleName}}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</template>
		<template v-if="roleList.length">
		<view class="title pdBox">选择自己的角色！</view>
		<view class="list">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in roleList" :key="listIndex"
					@click="handelClickRole(listItem)">
					<view class="grid-text" :class="{'active':activeRole && listItem.roleName==activeRole.roleName}">
						<text>{{listItem.roleName}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		</template>
		<view class="btns">
			<u-button type="primary" :throttleTime="1000" color="#74C3EA" shape="circle" @click="submit" class="btn">绑定</u-button>
		</view>

	</view>
</template>

<script lang="ts">

	import { defineComponent, reactive, toRefs,  } from "vue";
	import { onShow, onLoad } from "@dcloudio/uni-app";
	const StationComponent = defineComponent({
		name: "StationComponent",
		setup() {
			const data : any = reactive({
				activeRole: null,
				roleList: [],
				titleStyle: {
					color: '#fff',
					fontSize: '34rpx',
					fontWeight: '600'
				},
				MobileAdminList:[]
			});
			onLoad((option) => {


			})
			onShow(() => {
				const userInfo=uni.getStorageSync('userInfo')||null;
				console.log(userInfo)
				data.MobileAdminList=userInfo.roles.filter(item=>{
					return item.roleKey=="MobileAdmin"
				})
				data.roleList=userInfo.roles.filter(item=>{
					return item.roleKey!="MobileAdmin"
				})
			});

			const handelClickRole = (role) => {
				data.activeRole = role
			}
			const submit = async () => {

				try {
					if (!data.activeRole) {
						return uni.showToast({
							title: '请选择角色',
							icon: 'none'
						})
					}
					uni.setStorageSync('role', data.activeRole.roleName)
					uni.setStorageSync('roleKey', data.activeRole.roleKey)
					if(data.activeRole.roleName=='管理端' || data.activeRole.roleKey=="MobileAdmin"){
						uni.reLaunch({
							url: `/pages/manage/manage`
						})
					}else{
						uni.reLaunch({
							url: `/pages/planList/planList`
						})
					}
					
					
				} catch (e) {
					//TODO handle the exception
				}
			}
			return {
				...toRefs(data),
				submit,
				handelClickRole
			};
		}
	});
	export default StationComponent;
</script>

<style lang="less" scoped>
	.u-grid-item {
		margin-bottom: 20rpx;
	}

	.formBox {
		.title {
			margin-bottom: 20rpx;
		}
	}

	.btns {
		background-color: #fff;
		width: calc(100% - 68rpx);
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 34rpx;
		z-index: 9;
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	}

	.list {
		padding: 0 30rpx;
	}
</style>